<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sj" tagdir="/WEB-INF/tags/spring-jquery-tags"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<script type="text/javascript">
	$(document).ready(function() {
		<c:choose>
			<c:when test="${donor.id !=null and donor.id gt 0}">			
				$('#pageTitle').text('<spring:message code="editDonor.heading.view" />');
			</c:when>
			<c:otherwise>
				$('#pageTitle').text('<spring:message code="editDonor.heading" />');	
			</c:otherwise>
		</c:choose>		
		
		<c:if test="${!empty prevUrl}">
			var inputs = $('#editDonorForm :input[type="text"]');
			var selects = $('#editDonorForm select');
			var checkboxes = $('#editDonorForm checkbox');
	
			inputs.each(function() {
				$(this).attr('readonly','readonly');
			});
			selects.each(function() {
				$(this).attr('readonly','readonly');
			});
			checkboxes.each(function() {
				$(this).attr('readonly','readonly');
			});
		</c:if>
		$("#editDonorForm").validate({
			rules : {
				donorName : {
					required : true
				},
				donorAcronym : {
					required : true
				},
				
				email : {
					email : true
				}, 

				url : {
					isValidUrl : true
				}
			}
		});

		$("#countries").change(function() {
			loadDataViaAjax("loadStates.do", {
				"countryId" : this.value
			}, parseStatesJson);
		});

		$("#countries").change();
		
		$("#creationDate").val($.format.date($("#creationDate").val(), "MM/dd/yyyy"));
		
		$("#updationDate").val($.format.date($("#updationDate").val(), "MM/dd/yyyy"));
	});
	
	$('#cancelButton').click(function() {
		var ans = confirm('Are you sure you want to cancel editing this record without saving it?');
		if (ans) {
			loadDiv('content', 'refreshDashboard.do');
		}
	});
	
	<c:if test="${donor.id !=null and donor.id gt 0}">
		var inputs = $('#editDonorForm input[type="text"]:not(.uneditable)');
		var selects = $('#editDonorForm select');
		var checkboxes = $('#editDonorForm checkbox');
		for(var i = 0; i < inputs.length; i++) {
			inputs[i].disabled = true;
			var className = 'text_grey';
			if(inputs[i].className.indexOf("input-required") != -1) {
				className += ' input-required';	
			}
			inputs[i].className = className;
		}
		for(var i = 0; i < selects.length; i++) {
			selects[i].disabled = true;
			var className = 'text_grey';
			if(selects[i].className.indexOf("input-required") != -1) {
				className += ' input-required';
			}
			selects[i].className = className;
		}
		for(var i = 0; i < checkboxes.length; i++) {
			checkboxes[i].disabled = true;
		}
		$('#cancelEditButton').attr('disabled','disabled');
		$('#save').attr('disabled','disabled');
		$('#saveAndAddDonor').attr('disabled','disabled');
		
		$('#cancelEditButton').removeClass('blue_btn');
		$('#cancelEditButton').addClass('gray_btn');
		$('#save').removeClass('blue_btn');
		$('#save').addClass('gray_btn');
		$('#saveAndAddDonor').removeClass('blue_btn');
		$('#saveAndAddDonor').addClass('gray_btn');
		
		$('#editButton').removeClass('gray_btn');
		$('#editButton').addClass('blue_btn');
	</c:if>
	$('#editButton').click(function() {
		var inputs = $('#editDonorForm input[type="text"]:not(.uneditable)');
		var selects = $('#editDonorForm select');
		var checkboxes = $('#editDonorForm checkbox');

		for(var i = 0; i < inputs.length; i++) {
			inputs[i].readonly = false;
			inputs[i].disabled = false;
			var className = '';
			if(inputs[i].className.indexOf("input-required") != -1) {
				className += 'text_blue input-required';	
			} else {
				className += 'text_white input-required';
			}
			inputs[i].className = className;
		}
		for(var i = 0; i < selects.length; i++) {
			selects[i].readonly = false;
			selects[i].disabled = false;
			var className = '';
			if(selects[i].className.indexOf("input-required") != -1) {
				className += 'text_blue input-required';	
			} else {
				className += 'text_white input-required';
			}
			selects[i].className = className;
		}
		for(var i = 0; i < checkboxes.length; i++) {
			checkboxes[i].readonly = false;
			checkboxes[i].disabled = false;
		}
		$('#cancelEditButton').removeAttr('disabled');
		$('#save').removeAttr('disabled');
		$('#saveAndAddDonor').removeAttr('disabled');
		
		$('#cancelEditButton').removeClass('gray_btn');
		$('#cancelEditButton').addClass('blue_btn');
		$('#save').removeClass('gray_btn');
		$('#save').addClass('blue_btn');
		$('#saveAndAddDonor').removeClass('gray_btn');
		$('#saveAndAddDonor').addClass('blue_btn');
		
		$('#editButton').attr('disabled','disabled');
		$('#editButton').removeClass('blue_btn');
		$('#editButton').addClass('gray_btn');
	});
	
	$('#cancelEditButton').click(function() {
		var ans = confirm('Are you sure you want to cancel editing this record without saving it?');
		if (ans) {
			loadDiv('content', 'showEditDonor.do?id=${donor.id}');
		}
	});

	$('.close-button').click(function() {
		if(confirm('Are you sure that you want to close the form without saving the record?')) {
			window.location = '../secure/showDashboard.do';
		}	
	});
	function parseStatesJson(data) {
		var stateId = '${donor.state.id}';
		
		var html = '<option value="">Select</option>';
		if (data) {
			for (p in data) {
				if(stateId == p) {
					html += "<option selected='selected' value='" + p + "'>" + data[p] + "</option>";
				} else {
					html += "<option value='" + p + "'>" + data[p] + "</option>";
				}
			}
		}
		$("#states option").remove();
		$("#states").append(html);
	}
	
	function setSubmitAction(){
		$("#submitAction").val("SaveDonor");
	}
	
	$.validator.addMethod("isValidUrl", function(value, element) {
		if(jQuery.trim(value).length == 0){
			return true;
		}
		 var urlRegExp= /^(((ht|f){1}(tp:[/][/]){1})|((www.){1}))[-a-zA-Z0-9@:%_\+.~#?&//=]+$/
		return (urlRegExp.test(value));
	}, "Please enter valid URL");
</script>
<div id="editDonorDiv">
	<form:form name="editDonorForm" id="editDonorForm" action="saveDonor.do" method="post" modelAttribute="donor">
		<form:hidden path="id" />
		<input type="hidden" name="mode" value="${mode }" />
	    	<div class="main_form">
	    	<div class="form_head">
				<%-- <div class="floatL" style="padding-top:5px;">
					<a href="#" class="view-knowledgemanagementsearch-link blue_btn floatR"><spring:message code="findPartnergrant.link.viewKnowledgeManagement" /></a>
				</div> --%>
	    		<a href="#" class="close-button gray_btn floatR">Close Form</a>
	    		<br class="clear" />
	    	</div>
	        <div class="form_cont">
				<table cellspacing="5" width="100%">
					<tr class="row">
						<td class="input-field" colspan="5" style="text-align: center;">
							<%@ include file="/common/messages.jsp" %>
						</td>
					</tr>
					<tr class="row">
						<td class="label"><spring:message code="editDonor.label.name" /></td>
						<td class="input-field">
							<form:input path="donorName" cssClass="text_blue input-required" tabindex="1" />
							<form:errors path="donorName" cssClass="error" />
						</td>
						<td width="50">&nbsp;</td>
						<td class="label"><spring:message code="editDonor.label.contactName" /></td>
						<td class="input-field">
							<form:input path="contactName" cssClass="text_white" tabindex="10"/>
							<form:errors path="contactName" cssClass="error" />
						</td>
					</tr>
					<tr class="row">
						<td class="label"><spring:message code="editDonor.label.acronym" /></td>
						<td class="input-field">
							<form:input path="donorAcronym" cssClass="text_blue input-required" tabindex="2"/>
							<form:errors path="donorAcronym" cssClass="error" />
						</td>
					
					
						
						<td width="50">&nbsp;</td>
						
						<td class="label"><spring:message code="editDonor.label.phone" /></td>
						<td class="input-field">
							<form:input path="phone" cssClass="text_white" tabindex="11"/>
							<form:errors path="phone" cssClass="error" />
						</td>
						
						
					</tr>
					<tr class="row">
						<td class="label"><spring:message code="editDonor.label.address1" /></td>
						<td class="input-field">
							<form:input path="address1" cssClass="text_white" tabindex="3"/>
							<form:errors path="address1" cssClass="error" />
						</td>
						
					
						
						<td width="50">&nbsp;</td>
						
						<td class="label"><spring:message code="editDonor.label.fax" /></td>
						<td class="input-field">
							<form:input path="fax" cssClass="text_white" tabindex="12"/>
							<form:errors path="fax" cssClass="error" />
						</td>
						
					</tr>
					<tr class="row">
					
						<td class="label"><spring:message code="editDonor.label.address2" /></td>
						<td class="input-field">
							<form:input path="address2" cssClass="text_white" tabindex="4"/>
							<form:errors path="address2" cssClass="error" />
						</td>
					
						
						<td width="50">&nbsp;</td>
						
						<td class="label"><spring:message code="editDonor.label.email" /></td>
						<td class="input-field">
							<form:input path="email" cssClass="text_white" tabindex="13"/>
							<form:errors path="email" cssClass="error" />
						</td>
						
					</tr>
					<tr class="row">
					
						<td class="label"><spring:message code="editDonor.label.city" /></td>
						<td class="input-field">
							<form:input path="city" cssClass="text_white" tabindex="5"/>
							<form:errors path="city" cssClass="error" />
						</td>
					
						
						<td width="50">&nbsp;</td>
						
						<td class="label"><spring:message code="label.createdBy" /></td>
						<td class="input-field">
							<form:input  path="createdBy.fullName" cssClass="text_grey uneditable" disabled="true" tabindex="14" />
							<form:errors path="createdBy" cssClass="error" />
						</td>
						
					</tr>
					<tr class="row">
					
						<td class="label"><spring:message code="editDonor.label.zipCode" /></td>
						<td class="input-field">
							<form:input path="zipCode" cssClass="text_white" tabindex="6"/>
							<td><form:errors path="zipCode" cssClass="error" />
						</td>
						
						<!-- <td width="50">&nbsp;</td> -->
						
						<td class="label"><spring:message code="label.creationDate" /></td>
						<td class="input-field">
							<form:input disabled="true" path="creationDate" cssClass="text_grey uneditable" tabindex="15"/>
							<form:errors path="creationDate" cssClass="error" />
						</td>
						
					</tr>
					<tr class="row">
					
						<td class="label"><spring:message code="editDonor.label.country" /></td>
						<td class="input-field">
							<form:select path="country.id" id="countries" cssClass="text_white" tabindex="7">
							<c:choose>
									<c:when test="${donor.id !=null and donor.id gt 0}">
										<form:option value="${donor.state.country.id}" label="${donor.state.country.displayName}"></form:option>
									</c:when>
									<c:otherwise>
										<form:option value="" label="Select" />
									</c:otherwise>
							</c:choose>
								<form:options items="${countryList}" itemValue="id" itemLabel="displayName" />
							</form:select>
							<form:errors path="country.id" cssClass="error" />
						</td>
						
						
						<td width="50">&nbsp;</td>
						
						<td class="label"><spring:message code="label.updatedBy" /></td>
						<td class="input-field">
							<form:input disabled="true" path="updatedBy.fullName" cssClass="text_grey uneditable" tabindex="16"/>
							<form:errors path="updatedBy" cssClass="error" />
						</td>
						
					</tr>
					<tr class="row">
					
						<td class="label"><spring:message code="editDonor.label.state" /></td>
						<td class="input-field">
							<form:select path="state.id" id="states" cssClass="text_white" tabindex="8">
							</form:select>
							<form:errors path="state.id" cssClass="error" />
						</td>
						
						
						<td width="50">&nbsp;</td>
						
						<td class="label"><spring:message code="label.updationDate" /></td>
						<td class="input-field">
							<form:input disabled="true" path="updationDate" cssClass="text_grey uneditable" tabindex="17"/>
							<form:errors path="updationDate" cssClass="error" />
						</td>
						
					</tr>
					<tr class="row">
					
						<td class="label"><spring:message code="editDonor.label.url" /></td>
						<td class="input-field">
							<form:input path="url" cssClass="text_white" tabindex="9"/>
							<form:errors path="url" cssClass="error" />
						</td>
					
						
						<td width="50">&nbsp;</td>
						<td class="label">&nbsp;</td>
	                	<td></td>
					</tr>
					<tr>
	                	<td class="label">&nbsp;</td>
	                	<td>&nbsp;</td>
	                	<td width="50">&nbsp;</td>
	                	<td class="label">&nbsp;</td>
	                	<td></td>
	              	</tr>			
					<tr>
						<td class="input-field" align="center" colspan="5">
							<c:if test="${donor.id !=null and donor.id gt 0}">
									<input id="editButton" type="button" value="Edit" class="gray_btn" tabindex="-1"/>
									<input id="cancelEditButton" disabled="true" type="button" value="Cancel Edit" class="gray_btn" tabindex="-1"/>
							</c:if>
							<c:choose>
								<c:when test="${!empty prevUrl }">
									<input id="backButton" type="button" value="Back" onclick="loadDiv('content', '${prevUrl}');" class="blue_btn" tabindex="-1">
								</c:when>
								<c:otherwise>
									<input id="cancelButton" type="button" value="Cancel" class="blue_btn" tabindex="-1"/>
									<sj:submit id="save" target="editDonorDiv" key="editDonor.button.save" validate="true" beforeBind="setSubmitAction" cssClass="blue_btn" tabindex="-1"/>
									<sj:submit id="saveAndAddDonor" target="editDonorDiv" key="editDonor.button.saveAndAddDonor" validate="true" cssClass="blue_btn" tabindex="-1"/>
								</c:otherwise>
							</c:choose>
						</td>					
					</tr>
				</table>
	
	        </div>
	    </div>

	</form:form>
	<%-- <c:when test="${!empty mode && mode == 'editMode'}"> --%>
</div>
